<template>
  <div class="dashboard-container">
    <div class="filter-container">
      <el-row :gutter="10" style="width:100%">
        <el-col :span="4">
          <el-input
            v-model="listQuery.waybill_no"
            placeholder="运单号"
            class="input-with-select"
            @keypress.enter.native="reloadList"
          />
        </el-col>
        <el-col :span="4">
          <el-input
            v-model="listQuery.trade_code_real"
            placeholder="真实提单号"
            class="input-with-select"
            @keypress.enter.native="reloadList"
          />
        </el-col>
        <el-col :span="4">
          <el-input
            v-model="listQuery.merge_code"
            placeholder="合并提单号"
            class="input-with-select"
            @keypress.enter.native="reloadList"
          />
        </el-col>
        <el-col :span="4">
          <el-select
            v-model="listQuery.uid"
            clearable
            filterable
            remote
            reserve-keyword
            placeholder="账号选择"
            :remote-method="getUserList"
            :loading="loading"
          >
            <el-option
              v-for="item in userlist"
              :key="item.id"
              :label="item.username"
              :value="item.id"
            />
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-input
            v-model="listQuery.username"
            placeholder="账号昵称"
            class="input-with-select"
            @keypress.enter.native="reloadList"
          />
        </el-col>
        <el-col :span="4">
          <el-input
            v-model="listQuery.mother_id"
            placeholder="子/母单号"
            class="input-with-select"
            @keypress.enter.native="reloadList"
          />
        </el-col>
        <el-col :span="4">
          <el-select
            v-model="listQuery.port"
            clearable
            placeholder="口岸"
            style="margin-top:10px"
          >
            <el-option
              v-for="item in portList"
              :key="item.code"
              :label="item.port_name"
              :value="item.code"
            />
          </el-select>
        </el-col>
        <el-col style="margin-top:10px" :span="6">
          <el-input v-model="listQuery.user_mark" placeholder="客户唛头" class="input-with-select">
            <el-select slot="prepend" v-model="listQuery.user_mark_type" style="width:100px" placeholder="请选择">
              <el-option label="精准搜索" :value="1" />
              <el-option label="模糊搜索" :value="2" />
            </el-select>
          </el-input>

          <!-- <el-input
            v-model="listQuery.user_mark"
            placeholder="客户唛头"
            class="input-with-select"
            @keypress.enter.native="reloadList"
          /> -->
        </el-col>
        <el-col style="margin-top:10px" :span="6">
          <el-date-picker
            v-model="listQuery.consign_time"
            style="width: 100%;"
            type="datetimerange"
            range-separator="~"
            value-format="yyyy-MM-dd HH:mm:ss"
            start-placeholder="发货开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00', '23:59:59']"
          />
        </el-col>
        <el-col :span="4" style="margin-top:10px">
          <div style="display:flex;">
            <el-button
              class="filter-item"
              type="primary"
              icon="el-icon-search"
              @click="reloadList"
            >搜索</el-button>
            <download-excel
              style="margin-left:10px;"
              class="export-excel-wrapper"
              :fetch="importPackageList"
              :fields="json_fields"
              type="xls"
              worksheet="My Worksheet"
              name="账单报表"
              :before-generate="startDownload"
              :before-finish="finishDownload"
            >
              <el-button type="primary">导出账单报表</el-button>
            </download-excel>
            <el-button
              style="margin-left:10px;"
              class="filter-item"
              type="primary"
              @click="downLoad(1)"
            >唛头汇总导出</el-button>
            <el-button
              style="margin-left:10px;"
              class="filter-item"
              type="primary"
              @click="downLoad(2)"
            >用户汇总导出</el-button>
          </div>

        </el-col>
      </el-row>
    </div>
    <div style="padding:0 20px">

      <el-table
        ref="multipleTable"
        v-loading="listLoading"
        :data="list"
        height="calc(100vh - 250px)"
        style="width: 100%;"
        size="mini"
        border
        tooltip-effect="dark"
        :header-cell-style="{ background: '#eaf1fd', color: '#333' }"
      >
        <el-table-column
          label="发货日期"
          width="200px"
          prop="consign_time"
        />
        <el-table-column
          label="系统单号"
          width="160px"
          prop="tid"
        />
        <el-table-column
          label="主运单号"
          width="150px"
          prop="first_waybill_no"
        />
        <el-table-column
          label="从运单号"
          width="150px"
          prop="second_waybill_no"
        />
        <el-table-column
          label="来源单号"
          width="150px"
          prop="order_no"
        />
        <el-table-column
          label="是否子母件/母单号"
          prop="currency"
          width="180px"
        >
          <template slot-scope="{ row }">
            <div>
              <el-tag v-if="row.label_data.is_mother" type="success">是</el-tag>
              <el-tag v-else type="danger">否</el-tag>
              <span v-if="row.mother_info" style="margin-left:10px">{{ row.mother_info.mother_tid }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="重量"
          min-width="100px"
          prop="weight"
        />
        <el-table-column
          label="口岸"
          min-width="100px"
          prop="port.port_name"
        />
        <el-table-column
          label="真实提单号"
          min-width="160px"
          prop="customs_affairs.code"
        />
        <el-table-column
          label="系统提单号"
          min-width="160px"
          prop="customs_affairs.trade_code"
        />
        <el-table-column
          label="合并提单号"
          min-width="160px"
          prop="customs_affairs.merge_code"
        />
        <el-table-column
          label="航班号"
          min-width="160px"
          prop="customs_affairs.flight.flight_number"
        />
        <el-table-column
          label="发件人"
          min-width="150px"
          prop="sender.name"
        />
        <el-table-column
          label="账号昵称"
          min-width="150px"
          prop="user.username"
        />
        <el-table-column
          label="客户唛头"
          min-width="150px"
          prop="receiver.user_mark"
        />
        <el-table-column
          label="收件人"
          min-width="150px"
          prop="receiver.name"
        />
        <el-table-column
          label="电话"
          prop="currency"
          width="140px"
        >
          <template slot-scope="{ row }">
            <div>
              <span>+{{ row.receiver.area_code }} {{ row.receiver.mobile }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="地址"
          prop="currency"
          width="450px"
        >
          <template slot-scope="{ row }">
            <div>
              <span>{{ row.receiver.nation }}{{ row.receiver.province }}{{ row.receiver.city }}{{ row.receiver.district }}{{ row.receiver.detailed }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="货物类型"
          min-width="150px"
          prop="goods_type.name"
        />
        <el-table-column
          label="走件渠道"
          width="200px"
          prop="channel.name"
        />
        <el-table-column
          label="运费模版"
          width="200px"
          prop="freight_temp.name"
        />
        <el-table-column
          label="订单备注"
          width="200px"
          prop="remarks"
        />
        <el-table-column
          label="合计"
          width="100px"
          prop="pay_cost"
        />

      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.limit"
        @pagination="getList"
      />
    </div>
    <!-- <Detial :detial="detial" :status="status" :visible="visible" @update="closeDraw" @reload="reloadList" /> -->
  </div>
</template>

<script>
import { listReport, collecExport } from '@/api/finance/index'

import Pagination from '@/components/Pagination' // secondary package based on el-pagination
// import Detial from './components/flightDetial.vue'
import { listUser } from '@/api/user/index'
import _ from 'lodash'
import { listPort } from '@/api/base/port'
import moment from 'moment'

export default {
  name: 'Dashboard',
  components: {
    Pagination
    // Detial
  },
  data() {
    return {
      portList: [],
      data_arr: [],
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        waybill_no: '',
        uid: '',
        consign_time: '',
        trade_code_real: '',
        user_mark: '',
        username: '',
        mother_id: '',
        merge_code: '',
        user_mark_type: 1
      },
      visible: false,
      status: 1,
      id: '',
      detial: {},
      message: '',
      userlist: [],
      loading: false,

      json_fields: {
        发货日期: 'consign_time',
        系统订单号: {
          field: 'tid',
          callback: value => {
            return '&nbsp;' + value
          }
        },
        主运单号: 'first_waybill_no',
        从运单号: 'second_waybill_no',
        来源单号: 'order_no',
        是否子母件: {
          field: 'label_data.is_mother',
          callback: value => {
            return value ? '是' : '否'
          }
        },
        母单号: {
          field: 'mother_info.mother_tid',
          callback: value => {
            return '&nbsp;' + value
          }
        },
        重量: 'weight',
        口岸: 'port.port_name',
        真实提单号: 'customs_affairs.code',
        系统提单号: 'customs_affairs.trade_code',
        合并提单号: 'customs_affairs.merge_code',
        航班号: 'customs_affairs.flight.flight_number',
        发件人: 'sender.name',
        账号昵称: 'user.username',
        客户唛头: 'receiver.user_mark',
        收件人: 'receiver.name',
        电话: 'mobile',
        地址: 'address',
        货物类型: 'goods_type.name',
        走件渠道: 'channel.name',
        运费模版: 'freight_temp.name',
        订单备注: 'remarks',
        '合计(₩)': {
          field: 'pay_cost',
          callback: value => {
            return Number(value)
          }
        }
      }
    }
  },
  computed: {
  },
  created() {
    const startDate = moment().subtract(30, 'days').format('YYYY-MM-DD')
    const endDate = moment().format('YYYY-MM-DD')
    this.listQuery.consign_time = [(startDate + ' 00:00:00'), (endDate + ' 23:59:59')]
    console.log(this.listQuery.consign_time)

    this.getList()
    this.getUserList()
    listPort({
      limit: 9999,
      status: 1
    }).then(res => {
      this.portList = res.data.data
    })
  },
  methods: {
    getUserList(username) {
      this.loading = true
      listUser({
        limit: 50,
        page: 1,
        username: username
      }).then(response => {
        this.userlist = response.data.data
        this.loading = false
      }).catch(e => {
        this.loading = false
      })
    },
    closeDraw() {
      this.visible = false
    },
    addNews() {
      this.status = 1
      this.visible = true
    },
    edit(row) {
      this.detial = { ...row }
      this.status = 2
      this.visible = true
    },
    reloadList() {
      this.listQuery.page = 1
      this.visible = false
      this.getList()
    },
    getList() {
      this.listLoading = true
      listReport(this.listQuery).then(response => {
        this.list = response.data.list
        this.total = response.data.count
        this.listLoading = false
      })
    },
    // 导出
    getPageSize() {
      return new Promise((resolve, reject) => {
        listReport(this.listQuery).then(response => {
          resolve(response.data.count)
        })
      })
    },
    getExcelList(page) {
      const param = _.cloneDeep(this.listQuery)
      param.page = page
      return new Promise((resolve, reject) => {
        listReport(param).then(response => {
          response.data.list.forEach(item => {
            item.mobile = '+' + _.get(item.receiver, 'area_code', '') + ' ' + _.get(item.receiver, 'mobile', '')
            item.address = _.get(item.receiver, 'nation', '') + _.get(item.receiver, 'province', '') + _.get(item.receiver, 'city', '') + _.get(item.receiver, 'district', '') + _.get(item.receiver, 'detailed', '')
          })

          resolve(response.data.list)
        })
      })
    },
    async importPackageList() {
      const total = await this.getPageSize()
      const page = Math.ceil(total / this.listQuery.limit)
      var data = []
      for (let i = 1; i <= page; ++i) {
        data = data.concat(await this.getExcelList(i))
      }
      return data
    },
    startDownload() {
      this.loadingExcel = this.$loading({
        lock: true,
        text: '导出表格中，请稍后...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
    },
    finishDownload() {
      this.loadingExcel.close()
    },
    // 汇总导出
    downLoad(type) {
      const param = _.cloneDeep(this.listQuery)
      param.collectType = type
      collecExport(param).then(res => {
        this.$message({
          type: 'success',
          message: res.msg
        })
      })
    }
  }
}
</script>
<style scoped>
.filter-container{
  padding:20px 20px 10px;
}

.upload-demo{
  margin: 20px 0 10px;
}
</style>
